<template>
  <div>
    <div class="states-type">
      <span class="type-title">涉及行业:</span>
      <div class="btns" :class="{'display_':industryType}">
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-type-item"
          :class="{ isActive: industryChange == item.index }"
          v-for="item in industry"
          :key="item.index"
          @click="industryItem(item)"
        >
          {{ item.name }}
        </button>
      </div>
      <div class="operation">
        <span class="pointer" v-if="industryType" @click="industryType=false">更多<i class="ri-arrow-down-s-line"></i></span>
        <span class="pointer" v-else @click="industryType=true">收起<i class="ri-arrow-up-s-line"></i></span>
      </div>
    </div>
    <div class="states-time">
      <span class="time-title">项目地区:</span>
      <div class="btns" :class="{'display_':regionType}">
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-time-item"
          :class="{ isActive: regionChange == item.value }"
          v-for="(item,index) in regionoptions"
          :key="index"
          @click="regionItem(item,index)"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="operation">
        <span class="pointer" v-if="regionType" @click="regionType=false">更多<i class="ri-arrow-down-s-line"></i></span>
        <span class="pointer" v-else @click="regionType=true">收起<i class="ri-arrow-up-s-line"></i></span>
      </div>
    </div>
    <div class="row col-md-12" style="margin-top:10px;">
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >成立时间</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in establishTime" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <!-- <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >项目地区</label
          >
          <div class="col-md-8">
            <el-cascader
              v-model="region"
              :options="regionoptions"
              @change="handleChangeregion">
            </el-cascader>
          </div>
        </div>
      </div> -->
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >经营状态</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in operatingStatus" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >注册资本</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in capital" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <businessTransaction />
  </div>
</template>
<script>
import businessTransaction from "./businessTransaction";
import {cityData} from "../../../util/options";
export default {
  components: {
    businessTransaction,
  },
  data () {
    return {
      // 涉及行业
      industry: [
        {
          name: "全部",
          index: 1,
        },{
          name: "农林牧渔",
          index: 2,
        },{
          name: "市政设施",
          index: 3,
        },{
          name: "交通工程",
          index: 4,
        },{
          name: "信息技术",
          index: 5,
        },{
          name: "弱电安防",
          index: 6,
        },{
          name: "能源化工",
          index: 7,
        },{
          name: " 水利水电",
          index: 8,
        },{
          name: "机械设备",
          index: 9,
        },{
          name: "服务采购",
          index: 10,
        },{
          name: "医疗卫生",
          index: 11,
        },{
          name: "行政办公",
          index: 12,
        },{
          name: "建筑工程",
          index: 13,
        },{
          name: "日用百货",
          index: 14,
        },{
          name: " 材料配件",
          index: 15,
        },{
          name: "通讯电子",
          index: 16,
        },{
          name: "仪器仪表",
          index: 17,
        },{
          name: "环保绿化",
          index: 18,
        },{
          name: "服装布料",
          index: 19,
        },{
          name: "制造生产",
          index: 20,
        },{
          name: "家居建材",
          index: 21,
        },{
          name: "食品饮品",
          index: 22,
        },{
          name: "债券发行",
          index: 23,
        },{
          name: "其他",
          index: 24,
        }
      ],
      industryChange: 1,
      industryType: true,
      // 成立时间
      establishTime: [
        {
          label: '全部',
          value: '全部',
        },{
          label: '今年',
          value: '今年',
        },{
          label: '1-3年',
          value: '1-3年',
        },{
          label: '3-5年',
          value: '3-5年',
        },{
          label: '5-10年',
          value: '5-10年',
        },{
          label: '10-15年',
          value: '10-15年',
        },{
          label: '15-20年',
          value: '15-20年',
        },{
          label: '20年以上',
          value: '20年以上',
        }
      ],
      // 经营状态
      operatingStatus: [
        {
          label: '存续',
          value: '存续',
        },{
          label: '在业',
          value: '在业',
        },{
          label: '清算',
          value: '清算',
        },{
          label: '迁入',
          value: '迁入',
        },{
          label: '迁出',
          value: '迁出',
        },{
          label: '停业',
          value: '停业',
        },{
          label: '撤销',
          value: '撤销',
        },{
          label: '吊销',
          value: '吊销',
        },{
          label: '注销',
          value: '注销',
        }
      ],
      // 注册资本
      capital: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '100万以内',
          value: '100万以内',
        },{
          label: '100-200万',
          value: '100-200万',
        },{
          label: '200-500万',
          value: '200-500万',
        },{
          label: '500-1000万',
          value: '500-1000万',
        },{
          label: '1000-5000万',
          value: '1000-5000万',
        },{
          label: '5000万以上',
          value: '5000万以上',
        }
      ],
      regionoptions: cityData,
      regionType: true,
      regionChange: '全国',
    }
  },
  methods: {
    //涉及行业
    industryItem(item) {
      this.industryChange = item.index;
    },
    // 项目地区
    handleChangeregion(v){
      console.log(v);
    },
    regionItem(item,index){
      console.log(item,index);
      if(item.value!='全国'&&item.value!='全省'&&item.children){
        this.regionChange = item.children[0].value
        this.regionoptions = item.children
      }else{
        this.regionChange = item.value
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  display: flex;
  .type-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .time-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.btns{
  width: 85%;
  overflow: hidden;
}
.display_{
  height: 38px;
}
.operation{
  width: 9%;
  text-align: right;
  padding-top: 2px;
  i{
    vertical-align: bottom;
  }
}
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.row {
  ::v-deep .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
  }
  ::v-deep .el-cascader,
  ::v-deep .el-input__icon,
  ::v-deep .el-range-separator {
    line-height: 1.7rem;
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.col-md-12,.col-md-8,.col-md-10{
  padding-left: 0;
}
</style>
